<template>
  <div class="edit-container">
    <portal-view :drag-report-data="portalData" :component-data="componentData" />
  </div>
</template>

<script>
import {
  PreviewDataToLayoutData
} from '@/components/popsoft/Portal/utils/dragReport.js'
import PortalView from '@/components/popsoft/Portal/view'

export default {
  name: 'desktop',
  components: { PortalView },
  data() {
    return {
      isLoading: false,
      // 组件数据(含类别及组件)
      componentData: [],
      // 所有组件
      portletList: [],
      // 布局数据
      layoutData: {
        title: 'desktop',
        children: [
          {
            index: 1,
            initHeight: 300,
            children: [
              { code: null, name: null, col: 24, initCol: 24 }
            ]
          }
        ]
      },
      // Portal数据
      portalData: {
        title: '',
        children: []
      },
      // 查询参数
      queryParams: {
        status: this.constant.STATUS.NORMAL,
        sortInfo: {
          sort_field: 'orderNo',
          sort_sortType: 'ascending'
        }
      }

    }
  },
  mounted() {
    this.isLoading = true
    Promise.all([this.getPortletData(), this.getLayoutData()]).then(() => {
      this.formatPortalData()
    }).finally(() => {
      this.isLoading = false
    })
  },
  methods: {
    formatPortalData() {
      this.portalData = PreviewDataToLayoutData(
        this.layoutData,
        this.portletList,
        // 以下两个参数实际不起作用，页面中直接去除了判断
        { showControllerBar: false },
        { showChildrenControllerBar: true }
      )
    },
    async getPortletData() {
      this.componentData = []
      await this.$api.support.portletCategory.getPortletList(this.queryParams).then(res => {
        this.componentData = res.data
        this.componentData.forEach(category => this.portletList.push(...category.portletList))
      })
    },
    async getLayoutData() {
      await this.$api.system.userProfile.get().then(res => {
        if (res.data && res.data.desktopConfig) {
          this.layoutData = JSON.parse(res.data.desktopConfig)
        }
      })
    }
  }
}
</script>
<style >
/* 全局样式暂存地 */
/* 解决表格表头与内容列无法对齐的问题 */
body .el-table th.gutter {
  display: table-cell !important;
}
</style>
